Angular Material এ Stepper কম্পোনেন্টটি একটি দুর্দান্ত উপাদান যা ধাপে ধাপে তথ্য প্রদান করার জন্য ব্যবহৃত হয়। এটি সাধারণত একটি দীর্ঘ ফর্ম বা প্রক্রিয়া পরিচালনা করতে সহায়ক, যেখানে ব্যবহারকারী একের পর এক ধাপে যেতে পারেন। Stepper কম্পোনেন্টটি লিনিয়ার (Linear) এবং নন-লিনিয়ার (Non-Linear) দুটি মোডে ব্যবহার করা যেতে পারে।

• লিনিয়ার স্টেপার: যেখানে ব্যবহারকারী শুধুমাত্র পূর্ববর্তী ধাপগুলো সম্পূর্ণ করার পরই পরবর্তী ধাপে যেতে পারবেন।
• নন-লিনিয়ার স্টেপার: যেখানে ব্যবহারকারী যেকোনো ধাপে সরাসরি চলে যেতে পারবেন, পূর্ববর্তী ধাপগুলি সম্পূর্ণ করার প্রয়োজন নেই।

১. প্রাথমিক প্রস্তুতি

প্রথমে MatStepperModule ইমপোর্ট করতে হবে, যেটি Angular Material এর stepper কম্পোনেন্ট ব্যবহার করার জন্য প্রয়োজনীয় মডিউল।

app.module.ts ফাইলে প্রয়োজনীয় মডিউল ইমপোর্ট করা

import { MatStepperModule } from '@angular/material/stepper';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';

@NgModule({
  imports: [
    MatStepperModule,
    FormsModule,
    ReactiveFormsModule
  ]
})
export class AppModule { }

২. লিনিয়ার স্টেপার (Linear Stepper)

লিনিয়ার স্টেপার এমন একটি স্টেপার যেখানে ব্যবহারকারী একের পর এক ধাপে যাবে এবং পরবর্তী ধাপে যাওয়ার আগে পূর্ববর্তী ধাপ সম্পূর্ণ করতে হবে।

লিনিয়ার স্টেপার HTML উদাহরণ

<mat-vertical-stepper [linear]="true" #stepper>
  <mat-step label="Step 1">
    <p>Step 1 content goes here</p>
    <button mat-button matStepperNext>Next</button>
  </mat-step>

  <mat-step label="Step 2">
    <p>Step 2 content goes here</p>
    <button mat-button matStepperNext>Next</button>
  </mat-step>

  <mat-step label="Step 3">
    <p>Step 3 content goes here</p>
    <button mat-button matStepperPrevious>Back</button>
    <button mat-button matStepperNext>Next</button>
  </mat-step>

  <mat-step label="Step 4">
    <p>Step 4 content goes here</p>
    <button mat-button matStepperPrevious>Back</button>
    <button mat-button (click)="finish()">Finish</button>
  </mat-step>
</mat-vertical-stepper>

এখানে:

• [linear]="true": এই অ্যাট্রিবিউটটি লিনিয়ার স্টেপার সক্রিয় করে, যার ফলে ব্যবহারকারী শুধুমাত্র পূর্ববর্তী ধাপ সম্পূর্ণ করার পরই পরবর্তী ধাপে যেতে পারবেন।
• matStepperNext এবং matStepperPrevious: এই বাটনগুলো ব্যবহারকারীর নেভিগেশন কন্ট্রোল করতে সহায়ক।

৩. নন-লিনিয়ার স্টেপার (Non-Linear Stepper)

নন-লিনিয়ার স্টেপার এমন একটি স্টেপার যেখানে ব্যবহারকারী যেকোনো ধাপে সরাসরি যেতে পারবেন, এবং পূর্ববর্তী ধাপগুলি সম্পূর্ণ করার প্রয়োজন নেই।

নন-লিনিয়ার স্টেপার HTML উদাহরণ

<mat-horizontal-stepper [linear]="false" #stepper>
  <mat-step label="Step 1">
    <p>Step 1 content goes here</p>
    <button mat-button matStepperNext>Next</button>
  </mat-step>

  <mat-step label="Step 2">
    <p>Step 2 content goes here</p>
    <button mat-button matStepperNext>Next</button>
  </mat-step>

  <mat-step label="Step 3">
    <p>Step 3 content goes here</p>
    <button mat-button matStepperPrevious>Back</button>
    <button mat-button matStepperNext>Next</button>
  </mat-step>

  <mat-step label="Step 4">
    <p>Step 4 content goes here</p>
    <button mat-button matStepperPrevious>Back</button>
    <button mat-button (click)="finish()">Finish</button>
  </mat-step>
</mat-horizontal-stepper>

এখানে:

• [linear]="false": এই অ্যাট্রিবিউটটি নন-লিনিয়ার স্টেপার সক্রিয় করে, যার ফলে ব্যবহারকারী যেকোনো ধাপে যেতে সক্ষম হবেন এবং পূর্ববর্তী ধাপগুলি সম্পূর্ণ করার প্রয়োজন নেই।

৪. স্টেপের স্টাইলিং এবং কাস্টমাইজেশন

Angular Material এর Stepper কম্পোনেন্টটি সহজেই কাস্টমাইজ করা যায়, যেমন:

• ধাপের রঙ পরিবর্তন করা।
• ধাপের কন্টেন্টের ফর্ম্যাট কাস্টমাইজ করা।
• ধাপের শিরোনাম এবং বাটন কাস্টমাইজ করা।

উদাহরণ:

mat-stepper {
  margin: 20px;
}

mat-step {
  background-color: #f0f0f0;
  border-radius: 8px;
  padding: 15px;
}

mat-stepper .mat-step-header {
  font-size: 18px;
  color: #333;
}

এটি mat-stepper এর ডিজাইন এবং স্টাইল পরিবর্তন করবে, যাতে আপনি আপনার অ্যাপ্লিকেশনের থিমের সাথে মানানসই করতে পারেন।

৫. স্টেপার ফর্ম ব্যবহারের উদাহরণ

আপনি যদি স্টেপার কম্পোনেন্টের সাথে Reactive Forms ব্যবহার করতে চান, তবে আপনি FormGroup এবং FormControl ব্যবহার করে প্রতিটি ধাপের ফর্ম কনট্রোল করতে পারেন।

<mat-horizontal-stepper [formGroup]="stepperForm">
  <mat-step [stepControl]="stepperForm.get('step1')">
    <p>Step 1 content goes here</p>
    <button mat-button matStepperNext>Next</button>
  </mat-step>

  <mat-step [stepControl]="stepperForm.get('step2')">
    <p>Step 2 content goes here</p>
    <button mat-button matStepperNext>Next</button>
  </mat-step>

  <mat-step [stepControl]="stepperForm.get('step3')">
    <p>Step 3 content goes here</p>
    <button mat-button matStepperPrevious>Back</button>
    <button mat-button matStepperNext>Next</button>
  </mat-step>
</mat-horizontal-stepper>

এখানে:

• [stepControl]: প্রতিটি ধাপের ফর্ম কনট্রোল সংযুক্ত করতে ব্যবহার হয়।
• stepperForm: FormGroup যেটি সকল ধাপের জন্য ফর্ম কনট্রোল সংরক্ষণ করবে।

Angular Material Stepper কম্পোনেন্টটি একটি শক্তিশালী টুল, যা লিনিয়ার এবং নন-লিনিয়ার ধাপের মাধ্যমে ব্যবহারকারীদের একটি সহজ এবং কার্যকর ফর্ম পূরণ বা প্রক্রিয়া সম্পন্ন করার সুযোগ প্রদান করে। লিনিয়ার স্টেপারের মাধ্যমে ধাপে ধাপে একের পর এক যেতে হলে, নন-লিনিয়ার স্টেপারের মাধ্যমে ব্যবহারকারী যেকোনো ধাপে চলে যেতে পারেন। কাস্টমাইজেশন এবং ফর্ম ব্যবহারের মাধ্যমে এই কম্পোনেন্টের ব্যবহার আরও শক্তিশালী এবং ইউজার-বান্ধব হতে পারে।